<template>
  <div id="sign" v-if="bgShow">
    <div class="bg" @click="clear"></div>
    <div class="modal" v-if="show == 0" v-loading="loading">
      <div class="modal-top">
        <div class="modal-title"></div>
        <div class="modal-clear" @click="clear">
          <img src="../assets/imgs/shanchu.png" alt="" />
        </div>
      </div>
      <div class="modalAuthor">为喜欢的创作者加油！</div>
      <div class="modal-btns">
        <div
          class="modal-single"
          v-for="(item, index) in modal"
          :key="index"
          :class="item.show ? (modalType == 'ying' ? 'selected' : 'speed') : ''"
          @click="selMoney(item.gift_id, item.giftType, item.number)"
        >
          <div class="gift-icon">
            {{ item.number }}
          </div>
        </div>
      </div>
      <div class="giveAuthor">
        <span class="authorNum" v-if="modalType == 'ying'"
          >{{ payNumber }},</span
        >
        <span class="authorNum paySpeed" v-else>{{ payNumber }},</span>
        <span class="giftType" v-if="modalType == 'ying'">使用荧光棒支付</span>
        <span class="giftType " v-else>使用加速币支付</span>
      </div>
      <div class="sign-btns">
        <div
          class="pay"
          :class="modalType == 'ying' ? '' : 'speedBtn'"
          @click="payMoney()"
        >
          打赏作者
        </div>
      </div>
    </div>
    <div class="giftEffect" v-else-if="show == 1 && modalType == 'ying'">
      <div class="effIcon">
        <img src="../assets/imgs/ygE.png" alt="" />
      </div>
      <div class="effectText">成功打赏{{ payNumber }}荧光棒！</div>
    </div>
    <div class="giftEffect" v-else-if="show == 1 && modalType == 'speed'">
      <div class="effIcon">
        <img src="../assets/imgs/sppedE.png" alt="" />
      </div>
      <div class="effectText">成功打赏{{ payNumber }}加速币！</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    giftType: {
      type: String,
    },
    artObj: {
      type: Object,
    },
  },
  data() {
    return {
      modal: [],
      show: 3,
      codeUrl: "",
      id: 0,
      modalType: "",
      giftObj: {},
      payNumber: "",
      num: "",
      bgShow: false,
      type: "",
      effectShow: false,
      loading: true,
    };
  },
  watch: {
    //监听礼物类型
    giftType: {
      handler(newVal, oldVal) {
        console.log(newVal);
        this.modalType = newVal;
        this.modalType == "ying" ? this.init("荧光棒") : this.init("加速币");
      },
    },
    //监听文章详情传来的参数
    artObj: {
      handler(newVal, oldVal) {
        this.giftObj = newVal;
      },
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
  methods: {
    init(giftType) {
      this.$post(`/laiwen/gift/frontend/list?giftType=${giftType}`).then(
        (res) => {
          this.modal = res.list;
          this.loading = false;
          this.payNumber = res.list[0].number;
          for (let i of this.modal.keys()) {
            this.$set(this.modal[i], "show", false);
          }
        }
      );
    },
    //选择加速币数量
    selMoney(id, type, GiftNum) {
      this.id = id;
      for (let i of this.modal.keys()) {
        this.modal[i].show = false;
      }
      let res = [...this.modal].find((item) => id == item.gift_id);
      res.show = true;
      this.payNumber = res.number;
      this.num = GiftNum;
      this.type = type;
    },
    clear() {
      this.show = 3;
      this.bgShow = !this.bgShow;
    },
    showModal() {
      this.show = 0;
      this.bgShow = !this.bgShow;
    },
    //打赏作者
    payMoney() {
      let that = this;
      let obj = {};
      obj = this.giftObj;
      if (obj.getRewardId == JSON.parse(localStorage.getItem("user")).id) {
        that.$message.error("亲亲不能自己打赏自己哦");
        return false;
      }
      obj.rewardType = this.type;
      obj.rewardNumber = this.num;
      obj.rewardRecordId = this.id;
      console.log(obj);
      if (obj.rewardType == "") {
        that.$message.error("亲亲请选择数量在进行打赏哦");
        return false;
      }
      that.$post(`/laiwen/reward/frontend/save`, obj).then((res) => {
        if (res.code == 10013) {
          that.clear();
        }
        if (res.code == 10012) {
          that
            .$confirm("加速币余额不足,是否跳到充值页,?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
            .then(() => {
              that.clear();
              that.$router.push(`/gift`);
            })
            .catch(() => {
              that.clear();
              that.$message({
                type: "info",
                message: "已取消",
              });
            });
        }
        if (res.code == 0) {
          this.show = 1;
          this.effectIcon();
        }
      });
    },
    //特效
    effectIcon() {
      setTimeout(() => {
        this.clear();
      }, 1000);
      clearTimeout(this.effectIcon);
    },
  },
};
</script>

<style scoped>
#sign {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  top: 0;
}
.bg {
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background: black;
  position: absolute;
  /* z-index: 2; */
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.giftEffect {
  width: 1.96rem;
  height: 1.57rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3.86rem;

  z-index: 1;
}
.giftEffect .effIcon {
  width: 0.9rem;
  height: 0.9rem;
}
.giftEffect .effectText {
  height: 0.28rem;
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.28rem;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-top: 0.47rem;
}
.giftEffect .effIcon img {
  width: 100%;
  height: 100%;
}
.modal {
  width: 5rem;
  height: 4.32rem;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
  z-index: 9999;
  margin-top: 1.8rem;
  background: white;
  border-radius: 0.05rem;
}
.modalAuthor {
  width: 2.4rem;
  height: 0.33rem;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.33rem;
  color: rgba(110, 110, 110, 1);
  opacity: 1;
}
.modal .modal-top {
  width: 100%;
  height: 0.62rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.32rem;
  position: relative;
}
.modal .modal-top .modal-title {
  width: 0.7rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(40, 40, 40, 1);
  opacity: 1;
}
.modal .modal-top .modal-clear {
  width: 0.11rem;
  height: 0.11rem;
  cursor: pointer;
  position: absolute;
  right: 0.32rem;
}
.modal-btns {
  width: 4.35rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 0.42rem;
}
.modal-btns::after {
  content: "";
  width: 0.88rem;
}
.giveAuthor {
  width: 1.96rem;
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
  margin-top: 0.43rem;
}
.giveAuthor .authorNum {
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 100, 112, 1);
  opacity: 1;
}
.giveAuthor .giftType {
  font-size: 0.2rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  opacity: 1;
}
.modal .modal-single {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 0.24rem;
  width: 1.3rem;
  height: 0.96rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  cursor: pointer;
  border-radius: 0.1rem;
  border: 0.02rem solid transparent;
  background: #eeeeee;
  color: #282828;
}
.giveAuthor .paySpeed {
  color: #ffbd3d;
}

image {
  width: 100%;
  display: block;
  height: 100%;
}
.modal-text {
  width: 0.42rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
}
.modal-btn {
  width: 0.88rem;
  height: 0.78rem;
  background: rgba(238, 238, 238, 1);
  opacity: 1;
  border-radius: 0.05rem;
  margin-top: 0.08rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.gift-icon {
  font-size: 0.16rem;
}
.modal-btn .gift-icon {
  width: 0.31rem;
  height: 0.31rem;
  margin-top: 0.13rem;
  font-size: 0.16rem;
}
.gift-text {
  margin-top: 0.07rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  opacity: 1;
}
.sign-btns {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  height: 0.83rem;
  align-items: center;
  border-top: 0.01rem solid #f5f5f5;
  justify-content: center;
}
.pay {
  width: 3.3rem;
  height: 0.48rem;
  background: rgba(255, 100, 112, 1);
  line-height: 0.48rem;
  font-size: 0.22rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  cursor: pointer;
  border-radius: 0.4rem;
  text-align: center;
}
.clear {
  width: 1.22rem;
  height: 0.38rem;
  background: white;
  opacity: 1;
  border-radius: 0.05rem;
  cursor: pointer;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.38rem;
  border: 0.01rem solid rgba(153, 153, 153, 1);
  text-align: center;
  color: #282828;
  opacity: 1;
}
.clear-btn {
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
  right: -0.24rem;
  top: 0.18rem;
  cursor: pointer;
}
/* 选中后的样式 */
.selected {
  color: #ff6470 !important;
  border: 0.02rem solid #ff6470 !important;
  background: white !important;
}
.speed {
  color: #ffbd3d !important;
  border: 0.02rem solid #ffbd3d !important;
  background: white !important;
}
.speedBtn {
  background: #ffbd3d;
}
</style>
